import { defineComponent, inject, computed } from 'vue';
import { useRoute } from 'vue-router';

import './style/compConfig.scss';
import { ShowContentComp, FormControlComp } from './columns.ts';

export default defineComponent({
    name: 'CompList',
    props: {
        customerComp: {
            type: Array,
            default: () => []
        }
    },

    setup(this, props, ctx) {
        const addFormDataItem: Function | undefined = inject('addFormDataItem');
        const formDataMap: any = inject('formDataMap');
        const route: any = useRoute();
        const routeType = computed(() => {
            // 跳转类型
            return route.query.type;
        });
        const isViewDisabled = computed(() => {
            // 查看下禁用
            return routeType.value === 'view';
        });
        // 渲染组件列表
        const renderShowContentList = (columns: any, isCustomer: boolean = false) => {
            return isCustomer ? (
                <div class="comp-list">
                    {columns.map((v: any) => (
                        <el-popover
                            placement="top"
                            trigger="hover"
                            content={v.name}
                            hide-after={0}
                            popper-style="text-align:center;min-width:auto;width:auto;">
                            {{
                                reference: () => (
                                    <div class="popover_button_warp">
                                        <el-button
                                            key={v.id}
                                            disabled={isViewDisabled.value || formDataMap.value.has(v.id)}
                                            onClick={() => addFormDataItem?.(v)}>
                                            <img
                                                class="comp-item_icon"
                                                src={`/static/collectTable/${v.type}.svg`}
                                                alt=""
                                            />
                                            {v.name}
                                        </el-button>
                                    </div>
                                )
                            }}
                        </el-popover>
                    ))}
                </div>
            ) : (
                <div class="comp-list">
                    {columns.map((v: any) => (
                        <el-button key={v.type} onClick={() => addFormDataItem?.(v)} disabled={isViewDisabled.value}>
                            <img class="comp-item_icon" src={`/static/collectTable/${v.type}.svg`} alt="" />
                            {v.name}
                        </el-button>
                    ))}
                </div>
            );
        };

        return () => (
            <article class="config-comp-list">
                <h4 class="config-comp-title">客户属性</h4>
                {renderShowContentList(props.customerComp, true)}
                <el-divider />
                <h4 class="config-comp-title">表单组件</h4>
                {renderShowContentList(FormControlComp)}
                {/* <el-divider /> */}
                {/* <h4 class="config-comp-title">展示内容</h4>
                {renderShowContentList(ShowContentComp)} */}
            </article>
        );
    }
});
